<template>
  <div class="login">
    <div class="box">
      <input v-model.trim="param.username" placeholder="账号" class="user" type="text">
      <input v-model.trim="param.password" placeholder="密码" class="pass" type="text">

      <div @click="tap" class="selection">
        <input v-model="actItem.areaName" readonly placeholder="校区选择" class="pass" type="text">
        <img class="down" :style="comIsShowStyle" src="./img/down.svg">

        <div v-show="isShow" class="content">
          <div
            v-for="(item, i) in selections"
            :key="i"
            class="item"
            :class="{ act: item.act }"
            @click="pitch(item)">
            {{item.areaName}}
          </div>
        </div>
      </div>

      <button @click="login" class="btn">登录</button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import baseURL from '@/axios/request'

export default {
  name: 'Login',

  created () {
    this.$ajax({
      baseURL,
      url: '/action/findAreaList',
      method: 'post'
    }).then((res) => {
      res = res.data
      if (res.code === 0) {
        this.selections = res.result.areaList
      } else {
        this.$toast(res.code, res.msg)
      }
    }).catch((err) => {
      console.log(err)
    })
  },

  watch: {
    actItem (newV) {
      this.param.areaName = newV.areaName
      this.param.areaCode = newV.areaCode
    }
  },

  data () {
    return {
      // 上传参数
      param: {
        username: '', // 用户名
        password: '', // 密码
        areaCode: '010', // 地区编码
        areaName: '', // 地区名称
        client: '20' // 端类型 辅导Pad IOS 是20
      },

      // 选择框展示字段
      isShow: false,

      // 校区选中项
      actItem: {},

      // 校区选项
      selections: [
        {
          areaCode: '010',
          areaName: '北京'
        },
        {
          areaCode: '021',
          areaName: '上海'
        }
      ]
    }
  },

  computed: {
    // 校区选择小箭头动画样式
    comIsShowStyle () {
      if (this.isShow) {
        return {
          transform: 'translateY(-50%) rotateZ(180deg)'
        }
      } else {
        return null
      }
    }
  },

  methods: {
    // 展示“校区选择框”
    tap () {
      this.isShow ? this.isShow = false : this.isShow = true
    },

    // 选择校区
    pitch (item) {
      if (this.actItem.areaCode) {
        this.actItem.act = false
      }
      this.$set(item, 'act', true)
      this.actItem = item
    },

    // 判断参数
    checkParam () {
      const arr = Object.keys(this.param)
      for (let i = 0; i < arr.length; i++) {
        // 值为空
        if (!this.param[arr[i]]) {
          return false
        }
      }
      return true
    },

    // 登录接口
    login () {
      if (!this.checkParam()) {
        return this.$toast('信息不能为空')
      };

      this.$ajax({
        baseURL,
        url: '/action/login',
        method: 'post',
        data: this.param
      }).then((res) => {
        res = res.data
        if (res.code === 0) {
          this.$action.setClassInfo(res.result)

          this.$router.push({
            name: 'Base'
          })
        } else {
          this.$toast(res.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="postcss" scoped>
.login {
  position: relative;
  height: 100%;
  background-image: url('./img/loginBg.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;

  & .box {
    position: absolute;
    top: 3.79rem; left: 10.77rem;
    box-sizing: border-box;
    width: 7.6rem;
    height: 7.8rem;
    background-color: #FAFAFC;
    border-radius: 3px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    padding: 1.2rem .9rem .9rem .9rem;

    & input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      color: #555;
      font-size: .32rem;
      border-bottom: 1px solid #C3C3C3;
      padding: .28rem;
      margin-bottom: .3rem;

      &::-webkit-input-placeholder {
        color: #C3C3C3;
      }
    }

    & .selection {
      position: relative;
      margin-bottom: 1rem;

      & .content {
        position: absolute;
        width: 100%;
        height: 5rem;
        border-radius: 2px;
        top: 96%; left: 0;
        background-color: #FDFDFD;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
        overflow-y: scroll;

        & .item {
          box-sizing: border-box;
          width: 100%;
          color: #333333;
          padding: .26rem .4rem;
          line-height: 1;

          &.act {
            background-color: #F3F3F5;
          }
        }
      }
    }
    & .down {
      position: absolute;
      width: 0.3rem;
      height: .14rem;
      top: 50%; right: .3rem;
      transform: translateY(-50%);
      transition: transform .3s;
      transform-origin: center center;
    }

    & .btn {
      display: block;
      width: 4.4rem;
      height: .86rem;
      line-height: .86rem;
      text-align: center;
      border-radius: .43rem;
      font-size: .36rem;
      margin: 0 auto;
      color: #fff;
      background-color: #8D32DB;
      background-image: linear-gradient(#8D32DB, #B757D2);

      &:active {
        background-image: linear-gradient(#B757D2, #8D32DB);
      }
    }
  }
}
</style>
